<script setup>
import { ref } from 'vue'
import GridLayout from '@/components/GridLayout/GridLayout.vue'


// 示例 1: 基础网格
const items1 = ref([1, 2, 3, 4, 5, 6]);

// 示例 2: 响应式布局
const items2 = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

// 示例 3: 复杂布局
const handleGridClick = () => {
  console.log('Grid clicked!');
};

// 示例 4: 动态布局
const dynamicColumns = ref(3);
const dynamicGap = ref('15px');
const items = ref([
  { id: 1, text: 'Dynamic Item 1' },
  { id: 2, text: 'Dynamic Item 2' },
  { id: 3, text: 'Dynamic Item 3' },
]);

// 处理鼠标悬停事件
const handleHover = (event) => {
  console.log('示例4!');
  // 这里可以添加其他逻辑，例如改变样式或显示提示信息
};

// 示例 5: 完整功能示例
const cards = ref([
  { title: 'Card 1', content: 'Content for card 1' },
  { title: 'Card 2', content: 'Content for card 2' },
  { title: 'Card 3', content: 'Content for card 3' },
]);

const logEvent = () => {
  console.log('Grid item clicked!');
};

const toggleHover = () => {
  console.log('Hover state toggled!');
};
</script>

<template>
  <div>
    <!-- 示例1：基础网格 -->
    <h2>1. 基础网格</h2>
    <GridLayout :columns="3" :rows="2" gap="10px">
      <div v-for="n in items1" :key="n" class="grid-item">Item {{ n }}</div>
    </GridLayout>

    <!-- 示例2：响应式布局 -->
    <h2>2. 响应式布局</h2>
    <GridLayout
        :columns="2"
        :breakpoints="{ sm: 3, md: 4, lg: 5 }"
        gap="1rem"
        class="responsive-grid"
    >
      <div v-for="n in items2" :key="n" class="grid-item">Item {{ n }}</div>
    </GridLayout>

    <!-- 示例3：复杂布局 -->
    <h2>3. 复杂布局</h2>
    <GridLayout
        columns="1fr 2fr 100px"
        rows="repeat(3, 100px)"
        column-gap="20px"
        row-gap="15px"
        justify-content="center"
        align-items="stretch"
        style="height: 400px; border: 1px solid #ccc;"
        @click="handleGridClick"
    >
      <div class="header">Header</div>
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
    </GridLayout>

    <!-- 示例4：动态布局 -->
    <h2>4. 动态布局</h2>
    <GridLayout
        :columns="dynamicColumns"
        :gap="dynamicGap"
        :class="['theme-dark']"
        :style="{ backgroundColor: '#f5f5f5' }"
        @mouseenter="handleHover"
    >
      <div v-for="item in items" :key="item.id">{{ item.text }}</div>
    </GridLayout>

    <!-- 示例5：完整功能示例 -->
    <h2>5. 完整功能示例</h2>
    <GridLayout
        :columns="4"
        :rows="'minmax(100px, auto)'"
        :style="{ backgroundColor: '#f5f5f5' }"
        gap="20px"
        justify-items="center"
        align-content="start"
        :breakpoints="{ md: 3, lg: 4 }"
        class="custom-grid-style"
        style="padding: 20px;"
        @click="logEvent"
        @mouseenter="toggleHover"
        @mouseleave="toggleHover"
    >
      <template v-for="(card, index) in cards" :key="index">
        <CardComponent :data="card" />
      </template>
      <template #footer>
        <div class="grid-footer">Total items: {{ cards.length }}</div>
      </template>
    </GridLayout>
  </div>
</template>

<style scoped>
h2{
  margin-top: 20px;
}
.grid-item {
  background-color: #e0e0e0;
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
}
</style>